<template>
    <Page>
        <Topbar />
        <Content>
            <Panel>
                <view class="left">
                    <MyInfo :data="workInfo" backUrl="/pages/workbench/reason/index" />
                </view>
                <FormWrap header title="停机原因补录">
                    <u--form :labelPosition="labelPosition" :model="model" :rules="rules" ref="uForm" labelWidth="16rem"
                        :labelStyle="{'margin-bottom' : labelPosition === 'top' ? '2rem' : '0'}" style="
                            margin-top: 2rem; padding: 0 5rem;">
                        <u-form-item label="停机类别" prop="shutdownCategoryId">
                            <u-radio-group v-model="model.shutdownCategoryId" placement="row" @change="change">
                                <u-radio v-for="(item, index) in shutdownCategorys" :key="index" :label="item.label"
                                    :name="item.value">
                                </u-radio>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item label="停机原因" prop="periodPropertiesId">
                            <u-radio-group v-model="model.periodPropertiesId" placement="row" @change="change1">
                                <u-radio v-for="(item, index) in reasonShutdowns" :key="index" :label="item.label"
                                    :name="item.value">
                                </u-radio>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item label="备注">
                            <InputField v-model="model.remarks" :maxlength="100" />
                        </u-form-item>
                    </u--form>
                    <template slot="footer">
                        <Button large type="primary" @click="open1">
                            提交
                        </Button>
                    </template>
                </FormWrap>
            </Panel>
        </Content>
        <Modal title="确认提交吗？" ref="popup1" @confirm="confirm1" />
    </Page>
</template>

<script>
    import Page from "@/components/page/index.vue";
    import Topbar from "@/components/topbar/index.vue";
    import Content from "@/components/content/index.vue";
    import Panel from "@/components/panel/index.vue";
    import Empty from "@/components/empty/index.vue";
    import Button from "@/components/button/index.vue";
    import Tabs from "@/components/tabs/index";
    import FormWrap from '@/components/formWrap/index.vue';
    import InputField from '@/components/formField/inputField/index.vue';
    import Modal from '@/components/modal/index.vue';
    import fetch from "@/utils/fetch";
    import {
        getUserInfo
    } from "@/store/user.js";
    import {
        getParam
    } from "@/store/param.js";
    import MyInfo from "./info/index.vue";

    export default {
        components: {
            Page,
            Topbar,
            Content,
            Panel,
            Empty,
            Button,
            Tabs,
            FormWrap,
            InputField,
            Modal,
            MyInfo
        },
        data() {
            return {
                workInfo: getParam(),
                labelPosition: 'left',
                shutdownCategorys: [],
                reasonShutdowns: [],
                model: {
                    shutdownCategory: '',
					shutdownCategoryId:null,
                    periodProperties: '',
                    periodPropertiesId: null,
                },
                rules: {
                    'shutdownCategory': {
                        type: 'number',
                        required: true,
                        message: '必填项',
                        trigger: ['blur', 'change']
                    },
                    'periodProperties': {
                        type: 'string',
                        required: true,
                        message: '必填项',
                        trigger: ['blur', 'change']
                    },
                },
            }
        },
        methods: {
            getDictData1() {
                fetch("get", "/dms/shutdownCategory/getShutdownCategoryList", {
                    pageNum: 1,
                    pageSize: 50,
                }).then((res) => {
                    this.shutdownCategorys = res.records.map((item) => ({
                        label: item.shutdownCategory,
                        value: item.id,
                    }));
                    if (this.shutdownCategorys.length !== 0) {
                        this.model.shutdownCategory = this.shutdownCategorys[0].label;
						this.model.shutdownCategoryId = this.shutdownCategorys[0].value;
                        this.getDictData2(this.shutdownCategorys[0].value);
                    }
                });
            },
            getDictData2() {
                fetch("get", "/dms/shutdownReason/getShutdownReasonList", {
                    pageNum: 1,
                    pageSize: 50,
                    abnormalId: this.model.shutdownCategoryId,
                }).then((res) => {
                    this.reasonShutdowns = res.records.map((item) => ({
                        label: item.reasonForShutdown,
                        value: item.id,
                    }));
                });
            },
            change() {
                this.model.shutdownCategory=this.shutdownCategorys.find(item=>item.value==this.model.shutdownCategoryId).label
                this.model.periodPropertiesId=null;
                this.model.periodProperties=null;
                this.getDictData2();
            },
			change1(){
				this.model.periodProperties=this.reasonShutdowns.find(item=>item.value==this.model.periodPropertiesId).label
			},
            open1() {
                this.$refs['uForm'].validate().then((valid) => {
                    if (valid) {
                        this.$refs.popup1.open()
                    }
                });
            },
            confirm1() {
                fetch('post', '/dms/supplementaryRecording/updateSupplementaryRecording', null, {
                    id: this.workInfo.id,
                    ...this.model,
                    scode:this.workInfo.scode,
                    remarks: this.model.remarks,
                }).then((res) => {
                    this.$toast('补录成功');
                    this.goto('/pages/workbench/reason/index');
                });
            },
            goto(url) {
                uni.navigateTo({
                    url,
                    animationType: "pop-in",
                    animationDuration: 1000,
                })
            },
        },
        mounted() {
            this.getDictData1();
        }
    };
</script>

<style scoped lang="scss">
    .left {
        flex: 0 auto;
        width: 50rem;
        background: #f8f8fa;
    }

    .right {
        flex: 1;
        background-color: red;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 3rem 4rem 5rem;
    }
</style>